<template>
  <div class="page">
		<van-nav-bar
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			left-arrow
			@click-left="$router.goBack()"
		></van-nav-bar>
		<div class="content">
			<nav class="order_nav">
				<van-tabs v-model="active" @click="changeItem" sticky animated>
						<van-tab :title="'待使用(' + list1.length + ')'">
							<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
								<div class="coupon_item">
									<ul>
										<li v-for="(item, index) in list1" :key="index">
											<div class="t">
												<div class="l">{{item.name}}</div>
												<div class="c">
													<div class="title">{{item.title}}</div>
													<div class="time">
														<span class="date" v-if="$util.dueTime(item.due_date) > 0">还有{{$util.dueTime(item.due_date)}}天过期</span>
														<span class="date" v-else-if="$util.dueTime(item.due_date) == 0">今天将过期</span>
														<span class="due_time">{{$util.formatDate(item.due_date)}} 到期</span>
													</div>
												</div>
												<div class="r">
													<button>立即使用</button>
												</div>
											</div>
											<div class="b">{{item.info}}</div>
										</li>
									</ul>
									<van-empty v-show="list1.length == 0" description="暂无相关优惠券" />
								</div>
							</van-pull-refresh>
						</van-tab>
				    <van-tab :title="'已使用(' + list2.length + ')'">
							<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
								<div class="coupon_item">
									<ul>
										<li v-for="(item, index) in list2" :key="index">
											<div class="t">
												<div class="l">{{item.name}}</div>
												<div class="c">
													<div class="title">{{item.title}}</div>
													<div class="time">
														<span>已使用</span>
														<span class="due_time">{{$util.formatDate(item.due_date)}} 到期</span>
													</div>
												</div>
											</div>
											<div class="b">{{item.info}}</div>
										</li>
									</ul>
									<van-empty v-show="list2.length == 0" description="暂无相关优惠券" />
								</div>
							</van-pull-refresh>
						</van-tab>
				    <van-tab :title="'已过期(' + list3.length + ')'">
							<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
								<div class="coupon_item">
									<ul>
										<li v-for="(item, index) in list3" :key="index">
											<div class="t">
												<div class="l lose">{{item.name}}</div>
												<div class="c">
													<div class="title">{{item.title}}</div>
													<div class="time">
														<span>已过期</span>
														<span class="due_time">{{$util.formatDate(item.due_date)}} 到期</span>
													</div>
												</div>
											</div>
											<div class="b">{{item.info}}</div>
										</li>
									</ul>
									<van-empty v-show="list3.length == 0" description="暂无相关优惠券" />
								</div>
							</van-pull-refresh>
						</van-tab>
				</van-tabs>
			</nav>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			title: '我的优惠券',
			active: 0,
			nav_list: ['待使用', '已使用', '已过期'],
			isLoading: false,
			coupon_list: [
				{
					id: 1,
					name: '全额抵扣',
					title: '女装裤子优惠券',
					type: 1,
					status: 1,
					due_date: 1623583331,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 2,
					name: '8折抵扣',
					title: '全网包包优惠券',
					type: 2,
					status: 1,
					due_date: 1623947917,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 3,
					name: '5折抵扣',
					title: '指定商品优惠券',
					type: 3,
					status: 1,
					due_date: 1623947917,
					info: '仅限指定商品使用，不限线下门店'
				},
				{
					id: 4,
					name: '8折抵扣',
					title: '女裤子优惠券',
					type: 2,
					status: 2,
					due_date: 1623583331,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 5,
					name: '9折抵扣',
					title: '全网通优惠券',
					type: 4,
					status: 3,
					due_date: 1623432131,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 1,
					name: '全额抵扣',
					title: '女装裤子优惠券',
					type: 1,
					status: 1,
					due_date: 1623583331,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 2,
					name: '8折抵扣',
					title: '全网包包优惠券',
					type: 2,
					status: 1,
					due_date: 1623947917,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 3,
					name: '5折抵扣',
					title: '指定商品优惠券',
					type: 3,
					status: 1,
					due_date: 1623947917,
					info: '仅限指定商品使用，不限线下门店'
				},
				{
					id: 4,
					name: '8折抵扣',
					title: '女裤子优惠券',
					type: 2,
					status: 2,
					due_date: 1623583331,
					info: '全商城使用券，不限线下门店'
				},
				{
					id: 5,
					name: '9折抵扣',
					title: '全网通优惠券',
					type: 4,
					status: 3,
					due_date: 1623432131,
					info: '全商城使用券，不限线下门店'
				},
			],
			list1: [],
			list2: [],
			list3: []
    }
  },
  computed: {

  },
  methods: {
		changeItem () {
			
		},
		onRefresh () {
			setTimeout(()=> {
				this.$toast('刷新成功');
				this.isLoading = false;				
			}, 1000)
		},
		setList() {
			this.coupon_list.map((item, index) => {
				if(item.status == 1){
					this.list1.push(item);
				} else if(item.status == 2) {
					this.list2.push(item);
				} else if(item.status == 3) {
					this.list3.push(item);
				}
			})
		}
  },
  mounted () {
		this.setList();
  }
}
</script>

<style scoped lang="scss">
	@import '~styles/theme';
	/deep/ .van-nav-bar{
		.van-icon{
			color: #333;
			font-size: 20px;
		}
	}
	.content{
		.coupon_item{
			width: calc(100% - 26px);
			margin-left: 13px;
			margin-top: 16px;
			min-height: calc(100vh - 90px);
			ul{
				li{
					background-color: #fff;
					margin-bottom: 12px;
					border-radius: 8px;
					.t{
						display: flex;
						justify-content: flex-start;
						position: relative;
						@mixin quan {
							content: '';
							position: absolute;
							top: 50%;
							background-color: $body_bg_color;
							width: 12px;
							height: 12px;
							border-radius: 6px;
						}
						&::before{
							@include quan;
							left: -5px;
						}
						&::after{
							@include quan;
							right: -5px;
						}
						.l{
							border-radius: 8px 0 0 0 ;
							background-color: $theme_color;
							width: 95px;
							height: 90px;
							line-height: 90px;
							font-size: 18px;
							font-weight: bold;
							color: #fff;
							text-align: center;
							&.lose{
								background-color: #ddd;
								
							}
						}
						.c{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: flex-start;
							margin-left: 14px;
							.title{
								font-size: 16px;
								font-weight: bold;
							}
							.time{
								display: flex;
								flex-direction: column;
								justify-content: flex-start;
								align-items: flex-start;
								span{
									font-size: 14px;
									display: block;
									&:nth-child(1){
										color: $theme_color;
									}
									&:nth-last-child(1){
										color: #a4a4a4;
									}
								}
							}
						}
						.r{
							margin-left: 18px;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							button{
								background-color: #f0f1ff;
								color: $theme_color;
								height: 28px;
								width: 86px;
								border: none;
								border-radius: 14px;
								font-size: 14px;
							}
						}
					}
					.b{
						border-top: 1px #eee solid;
						padding: 12px 8px;
						text-align: left;
						color: #4a4a4a;
					}
				}
			}
		}
	}
</style>
